import { Button, Empty, Flex, message, Pagination } from "antd";
import type { PresetColors } from "../types/base";
import { Title } from "../components/Title";
import { useSelector } from "react-redux";
import type { ROOTSTATE } from "../store";
import { useNavigate } from "react-router";
import { reqGetIssueByPage } from "../api/issue";
import { useEffect, useState } from "react";
import type { Issue as ISSUE } from "../types/issue";
import { IssueCard } from "../components/IssueCard";

export const Issue = () => {
    const typeList = useSelector((state: ROOTSTATE) => state.typeStore.typeList)
    const isLogin = useSelector((state: ROOTSTATE) => state.userStore.isLogin)
    const [messageApi, contextHold] = message.useMessage()
    const navigate = useNavigate()
    const gotoAddQ = () => {
        if (isLogin) {
            navigate("/editissue")
        } else {
            messageApi.error("请登录")
        }
    }

    const [issueList, setIssueList] = useState<ISSUE[]>([])

    const [type, setType] = useState("all")

    const [currentPage, setCurrentPage] = useState(1)
    const [total, setTotal] = useState(0)

    const pageSize = 2

    //获取当前页面展示的issue
    const getIssue = async () => {
        const res = await reqGetIssueByPage({
            page: currentPage,
            size: pageSize,
            type: type !== "all" ? type : undefined
        })
        setIssueList(res.data.list)
        setTotal(res.data.total)
    }
    useEffect(() => {
        getIssue()
    }, [currentPage, type])
    return (
        <>
            <Flex vertical gap={30}>
                <Title title="问答模块">
                    <Flex gap={20}>
                        {[{ typename: "全部", _id: "all", color: "red" as PresetColors },
                        ...typeList].map(
                            (item) => (
                                <Button size="small"
                                    color={item.color}
                                    variant="solid"
                                    key={item._id}
                                    onClick={() => {
                                        setType(item._id)
                                        setCurrentPage(1)
                                    }}
                                >{item.typename}
                                </Button>
                            ))}
                    </Flex>
                </Title>
                <Flex gap={30} align="flex-start">
                    <Flex flex={3} vertical gap={20}>
                        {issueList.length > 0 ? (
                        issueList.map((item) => (
                            <IssueCard {...item} key={item._id}></IssueCard>
                        ))
                    ) : (
                        <Empty description="暂无相关提问"></Empty>
                    )}
                        {issueList.length > 0 && (
                            <Pagination
                                current={currentPage}
                                pageSize={pageSize}
                                align="center"
                                defaultCurrent={1}
                                total={total}
                                onChange={(e) => setCurrentPage(e)}
                            ></Pagination>
                        )}
                    </Flex>
                    <Flex flex={1} vertical>
                        <Button type="primary" block onClick={gotoAddQ}>
                            我要提问
                        </Button>
                    </Flex>
                </Flex>
            </Flex>
            {contextHold}
        </>

    )
}






